<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>拍照</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<!-- <body onload="click()"> -->
<body>
	<video id="video" width="340" height="280" autoplay></video>
	<button id="snap" class="input-button">拍照</button>
	<canvas id="canvas" width="340" height="280"></canvas>
	<div id="result"  style="height:120px;width:100px;"></div>
</body>
<script type="text/javascript">
	window.addEventListener("DOMContentLoaded", function() {
		var canvas = document.getElementById("canvas"), 
		context = canvas.getContext("2d"), //getContext唯一合法值2d
		video = document.getElementById("video"), 
		videoObj = {
			"video" : true,
			"audio" : false
		}, 
			errBack = function(error) {
			console.log("Video capture error: ", error.code);
		};

		if (navigator.getUserMedia) { 
			// Standard 如果用户允许打开摄像头
            //stream为读取的视频流
			navigator.getUserMedia(videoObj, function(stream) {
				video.src = stream;
				video.play();
			}, errBack);
		} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed  根据不同的浏览器写法不同
			navigator.webkitGetUserMedia(videoObj, function(stream) {
				video.src = window.webkitURL.createObjectURL(stream);
				video.play();
			}, errBack);
		} else if (navigator.mozGetUserMedia) { 
			navigator.mozGetUserMedia(videoObj, function(stream) {
				video.src = window.URL.createObjectURL(stream);
				video.play();
			}, errBack);
		}
		document.getElementById("snap").addEventListener("click", function() {
			context.drawImage(video, 0, 0, 340, 280);
			var img = canvas.toDataURL("image/png").substr(22);
        	alert(img);
        $.post("<%=request.getContextPath()%>/img/load", 
        			{"img":canvas.toDataURL("image/png").substr(22)}, 
        			function(json){
   				$("#result").html("年龄:"+json.age+"<br/>性别："+json.sex); },
   			 'json');
        });
       setInterval(function(){
        	context.drawImage(video, 0, 0, 340, 280);
        	 $.post("<%=request.getContextPath()%>/img/load", 
         			{"img":canvas.toDataURL("image/png").substr(22)}, 
         			function(json){
    				$("#result").html("年龄:"+json.age+"<br/>性别："+json.sex); },
    			 'json');
        
        },1000); 
	}, false);
</script>

</html>